<template>
	<view class="bg-white" style="width: 100vw; height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<text style="font-size: 32rpx; color: #333333; font-weight: bold;">账号与安全</text>
			</block>
		</cu-custom>
		<view style="">
			<view class="flex justify-between" style="padding: 32rpx 32rpx;" @click="goToEdit('newMobile')">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">手机号</view>
				<view class="flex justify-end align-center">
					<view class="field-name" style="color: #999999; font-size: 32rpx;">
						{{user.mobile.replace(reg, "$1****$2")}}
					</view>
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view class="flex justify-between" style="padding: 32rpx 32rpx;" @click="goToEdit('newPassword')">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">修改密码</view>
				<view class="flex justify-end align-center">
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx; font-weight: bold;">社交平台账号绑定</view>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">微信</view>
				<switch @change="changeBindWechat" :class="bindWechat?'checked':''" :checked="bindWechat?true:false"></switch>
			</view>
			<view v-if="develop" class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">QQ</view>
				<switch @change="changeBindQQ" :class="bindQQ?'checked':''" :checked="bindQQ?true:false"></switch>
			</view>
			<view class="flex justify-between" style="padding: 32rpx 32rpx;">
				<view class="field-name" style="color: #333333; font-size: 32rpx; font-weight: bold;">高级设置</view>
			</view>
			<view class="flex justify-between" style="padding: 32rpx 32rpx;" @click="goToEdit('closeAccount')">
				<view class="field-name" style="color: #333333; font-size: 32rpx;">账号注销</view>
				<view class="flex justify-end align-center">
					<view class="cuIcon-right" style="margin-left: 16rpx; font-size: 32rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					mobile: this.$store.getters.mobile
				},
				reg: /(\d{3})\d{4}(\d+)?/ ,
				switchA: false,
				bindWechat: false,
				bindQQ: false
			}
		},
		methods: {
			goToEdit(pathName) {
				this.$Router.push({
					name: pathName
				})
			},
			changeBindWechat(e) {
				this.bindWechat = e.detail.value;
			}
			,
			changeBindQQ(e) {
				this.bindQQ = e.detail.value;
			}
		}
	}
</script>

<style>
</style>
